.mine {
  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-17 {
    margin-top: 34rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  .display-flex {
    display: flex;
  }

  .mr-auto {
    margin-right: auto !important;
  }

  &.page {
    background-color: #f8f8f8;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding: 24rpx 28rpx 100rpx 28rpx;
      background: #fff;



      /* 顶部横幅 */
      .banner-section {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      }

      /* 图片容器 */
      .image-container {
        position: relative;
        height: 400rpx;
        overflow: hidden;
      }

      .banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .share-icon {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        width: 64rpx;
        height: 64rpx;
        // background: rgba(255, 255, 255, 0.95);
        // border: 2rpx solid #2196f3;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
        }
      }

      .share-text {
        color: #2196f3;
        font-size: 28rpx;
        font-weight: bold;
      }

             /* 信息卡片 */
       .info-card {
         background: #fff;
         padding: 32rpx;
         border-top: 1rpx solid #f0f0f0;
       }

       .card-content {
         display: flex;
         flex-direction: column;
         gap: 24rpx;
       }

       .top-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
       }

       .left-content {
         display: flex;
         align-items: center;
         gap: 16rpx;
         flex: 1;
       }

       .event-icon {
         width: 48rpx;
         height: 48rpx;
         border-radius: 50%;
         background: #fff;
         border: 3rpx solid #2196f3;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
       }

       .icon-inner {
         width: 24rpx;
         height: 24rpx;
         border-radius: 50%;
         background: #2196f3;
       }

       .event-title {
         font-size: 32rpx;
         color: #333;
         font-weight: 600;
         line-height: 1.3;
         flex: 1;
       }

       .live-status {
         display: flex;
         align-items: center;
         flex-shrink: 0;
       }

       .live-text {
         color: #2196f3;
         font-size: 28rpx;
         font-weight: 500;
       }

       .bottom-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
       }

       .reservation-info {
         color: #666;
         font-size: 26rpx;
         background: #f8f9fa;
         padding: 8rpx 16rpx;
         border-radius: 16rpx;
         flex: 1;
         margin-right: 20rpx;
       }

       .reservation-count {
         color: #666;
       }

       .reservation-btn {
        background: #213165;
        color: #fff;
        border: none;
        border-radius: 36rpx;
        /* padding: 16rpx 32rpx; */
        font-size: 24rpx;
        font-weight: 600;
        flex-shrink: 0;
        transition: all 0.3s ease;

         &:hover {
           transform: translateY(-2rpx);
           box-shadow: 0 4rpx 12rpx rgba(30, 58, 138, 0.3);
         }
       }

      /* 赛事信息 */
      .competition-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx;
        background: #fff;
        border-bottom: 1rpx solid #f0f0f0;
      }

      .schedule-info {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;
        flex: 1;
      }

      .schedule-time,
      .schedule-group,
      .schedule-category,
      .schedule-event,
      .schedule-stage {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }

      .participant-count {
        background: #f8f9fa;
        padding: 12rpx 20rpx;
        border-radius: 20rpx;
      }

      .count-text {
        font-size: 26rpx;
        color: #666;
      }

             /* 排名列表 */
       .ranking-section {
         background: #fff;
         padding: 32rpx;
       }

       .ranking-header {
         display: flex;
         align-items: center;
         padding: 24rpx 0;
         border-bottom: 2rpx solid #f0f0f0;
         margin-bottom: 24rpx;
       }

       .ranking-title {
         width: 120rpx;
         font-size: 26rpx;
         color: #999;
         font-weight: 500;
         text-align: center;
       }

       .athlete-title {
         flex: 1;
         font-size: 26rpx;
         color: #999;
         font-weight: 500;
         text-align: left;
         padding-left: 20rpx;
       }

       .group-title {
         width: 120rpx;
         font-size: 26rpx;
         color: #999;
         font-weight: 500;
         text-align: center;
       }

       .lane-title {
         width: 80rpx;
         font-size: 26rpx;
         color: #999;
         font-weight: 500;
         text-align: center;
       }

       .result-title {
         width: 120rpx;
         font-size: 26rpx;
         color: #999;
         font-weight: 500;
         text-align: center;
       }

       .ranking-list {
         display: flex;
         flex-direction: column;
         gap: 24rpx;
       }

       .ranking-item {
         display: flex;
         align-items: center;
         padding: 24rpx 0;
         border-bottom: 1rpx solid #f8f8f8;
       }

       .rank {
         width: 120rpx;
         display: flex;
         align-items: center;
         justify-content: center;

         .medal {
           width: 56rpx;
           height: 56rpx;
         }

         .rank-num {
           font-size: 32rpx;
           color: #333;
           font-weight: bold;
         }
       }

       .athlete-column {
         flex: 1;
         display: flex;
         align-items: center;
         gap: 16rpx;
         padding-left: 20rpx;
       }

       .athlete-avatar {
         width: 45rpx;
         height: 60rpx;
         border-radius: 50%;
         border: 2rpx solid #f0f0f0;
       }

       .athlete-info {
         display: flex;
         flex-direction: column;
         gap: 4rpx;
       }

       .athlete-name-row {
         display: flex;
         align-items: center;
         gap: 8rpx;
       }

       .athlete-name {
         font-size: 28rpx;
         color: #333;
         font-weight: 500;
       }

       .late-tag {
         font-size: 20rpx;
         color: #ff4444;
         background: #ffe6e6;
         padding: 2rpx 8rpx;
         border-radius: 4rpx;
         font-weight: 500;
       }

       .athlete-id {
         font-size: 22rpx;
         color: #999;
       }

       .athlete-location {
         font-size: 22rpx;
         color: #999;
       }

       .group-column {
         width: 120rpx;
         text-align: center;
       }

       .group-text {
         font-size: 26rpx;
         color: #666;
       }

       .lane-column {
         width: 80rpx;
         text-align: center;
       }

       .lane-text {
         font-size: 26rpx;
         color: #666;
       }

       .result-column {
         width: 120rpx;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 8rpx;
       }

       .result-time {
         font-size: 28rpx;
         color: #333;
         font-weight: bold;
       }

       .result-tag {
        //  background: #333;
         color: #fff;
         padding: 4rpx 12rpx;
         border-radius: 12rpx;
         font-size: 20rpx;
         font-weight: bold;
       }

       .tag-text {
         color: #fff;
       }
    }
  }

  .movable-area {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
  }

  .fab-container {
    pointer-events: auto;
    width: 100rpx;
    height: 100rpx;
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  }

  .fab-icon {
    width: 100%;
    height: 100%;
  }

  .text-wrapper {
    width: 90%;
    height: 90rpx;
    background-color: #1D428A;
    box-shadow: 0rpx 0rpx 18rpx 0rpx #ee73500a;
    border-radius: 22rpx;
    border: unset !important;

    &::after {
      border: unset !important;
    }

    .text {
      color: #fff;
      font-size: 30rpx;
      font-family: 'PingFang SC';
      line-height: 90rpx;
    }
  }
}
